<template >
    <div class="index">
        <div class="sidebar">
            <div class="lefttop">出口合同业务</div>
            <div class="sidebar-item" :class="{ 'pitch': route.name.includes('ForeignContract') }" @click="goto(1)">
                外来合同
            </div>
            <div class="sidebar-item" :class="{ 'pitch': route.name.includes('ProprietaryContract') }" @click="goto(2)">
                自有合同</div>
        </div>
        <div style="width: calc(100%);padding-left: 130px;">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const goto = (val) => {
    val === 1
        ? router.push({
            path: '/exportContract/exportContractBusiness/ForeignContract'
        })
        : router.push({
            path: '/exportContract/exportContractBusiness/ProprietaryContract'
        })
}


</script>

<style lang="scss" scoped>
.index {
    display: flex;
    justify-content: flex-start;
    // align-items: center;
}



.sidebar {
    position: fixed;
    width: 130px;
    height: 100vh;
    background: #ffffff;
    padding: 4px;
    border: 1px solid #E5E6E9;
    font-weight: 500;

    .lefttop {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #efeff0;
        box-sizing: border-box;
        padding-left: 10px;
        font-size: 14px;
        // color: #3c4144;
        letter-spacing: -1px;
        font-weight: 500;
        line-height: 39px;
        margin-bottom: 4px;
    }

    .sidebar-item {
        width: 100%;
        height: 38px;
        // background-color: #F2F3F5;
        text-align: center;
        line-height: 38px;
        margin-bottom: 4px;
        cursor: pointer;
        color: #bbbcbe;
        // opacity: 0.65;
    }

    .pitch {
        background-color: #E6F7FF;
        color: #409eff;
        font-weight: 500;
    }
}
</style>